<template>
  <div class="allMenu">
<div  class="menu">
  <img src="../../assets/my_picture/Clouddisk.png"/>
  <img src="../../assets/my_picture/FavoritesAndLikes.png"/>
  <img src="../../assets/my_picture/LocalOrDownloaded.png"/>
  <img src="../../assets/my_picture/Musicjars.png"/>
  <img src="../../assets/my_picture/Mypodcasts.png"/>
  <img src="../../assets/my_picture/Mybuddy.png"/>
  <img src="../../assets/my_picture/Purchased.png"/>
  <img src="../../assets/my_picture/Recentlyplayed.png"/>
</div>
    <div style="text-align: center;padding: 15px">
<!--      <hr style="height: 0.1px;background-color: #fdfafa" />-->
      <span class="iconfont icon-jiahao"></span>
      <span style="font-size: 14px">音乐应用</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyMenu",
  data() {
    return {
      picture: ['Clouddisk.png','FavoritesAndLikes.png','LocalOrDownloaded.png',
      'MusicJars.png','Mypodcasts.png','Mybuddy.png','Purchased.png','Recentlyplayed.png']
    }
  },
}
</script>

<style scoped>
.menu{
  display: flex;
  justify-content: space-around;
  align-content: space-around;
  flex-wrap:wrap-reverse;
}
.menu>img{
  width: 80px;
  height: 80px;
}
.allMenu{
  background-color: white;
  margin: 12px;
  border-radius: 8px;
}
</style>
